import { connect } from 'umi';
import { reportAllByStepService } from '../services';
import { Spin, message } from 'antd';
import { ContractCountContext } from '../common';
import { CountSearchFormView } from './CountSearchFormView';
import '../common/styles.less';
import { AllCountEhcartsView } from './AllCountEhcartsView';
import { useState } from 'react';

const AllCountManageView: React.FC<ContractAllCountAPI.IManageType> = ({ curRes }) => {
  /** 样式根目录 */
  const styleFixCls = 'contract-report-';

  /** 统计步长 */
  const [countStepType, setCountStepType] = useState<string>('');

  /** 获取数据回调 */
  const allCountCallback = (res: any) => {
    if (res && res?.msgFlag) {
    } else {
      message.error(res?.msg);
    }
  };

  /** 引入接口 */
  const { reportAllByStepRun, reportAllByStepInfo, reportAllByStepLoading } = reportAllByStepService(curRes, allCountCallback);

  return (
    <ContractCountContext.Provider
      value={{
        styleFixCls,
        reportByStepRun: reportAllByStepRun,
        echartsDetailInfo: reportAllByStepInfo,
        stepTypeValue: countStepType,
      }}
    >
      <Spin spinning={reportAllByStepLoading}>
        <div className={`${styleFixCls}allCountDiv`}>
          <CountSearchFormView countType={'allCount'} changeStepType={setCountStepType} />
          <AllCountEhcartsView />
        </div>
      </Spin>
    </ContractCountContext.Provider>
  );
};
export default connect(({ baseLogin }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
}))(AllCountManageView);
